<template>
  <page-layout>
    <a-row :gutter="12">
      <a-col :md="24" :lg="7">
        <a-card bordered title="个人信息">
          <div class="text-center">
            <div class="text-center">
              <img class="w-30 h-30 rounded-1/2 mb-4" :src="getAvatar()">
            </div>
            <div class="text-black text-xl">{{ user.username }}</div>
            <!-- <div class="bio">{{ roleGroup }}</div> -->
          </div>
          <div >
            <p class="ma-0">
              <a-icon class="info" type="phone" />
              <span class="ml-2">{{ user.phonenumber }}</span>
            </p>
            <p class="ma-0">
              <a-icon class="info" type="mail" />
              <span class="ml-2">{{ user.email }}</span>
            </p>
            <p class="ma-0">
              <a-icon  type="apartment" />
              <span class="ml-2">{{ '研发部' }}</span>
            </p>
            <p class="ma-0">
              <a-icon class="info" type="calendar" />
              <span class="ml-2">{{ user.createTime }}</span>
            </p>
          </div>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card bordered title="基本资料">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="修改资料">
              <a-form-model layout="horizontal" labelAlign="right" ref="infoForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="infoForm" :rules="infovalidatorRules">
                <a-form-model-item label="用户账号" prop="username">
                  <a-input placeholder="请输入用户账号" :value="infoForm.username" disabled />
                </a-form-model-item>
                <a-form-model-item label="用户姓名" prop="nickname">
                  <a-input placeholder="请输入用户姓名" v-model.trim="infoForm.nickname" />
                </a-form-model-item>
                <a-form-model-item label="邮箱" prop="email">
                  <a-input placeholder="请输入邮箱" v-model.trim="infoForm.email" />
                </a-form-model-item>
                <a-form-model-item label="简介">
                  <a-textarea placeholder="请输入简介" v-model.trim="infoForm.introduction"/>
                </a-form-model-item>
                <a-form-model-item label="头像">
                  <z-image-upload v-model.trim="infoForm.avatar"></z-image-upload>
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
                  <a-button type="primary" @click="updateInfo">保存</a-button>
                </a-form-model-item>
              </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2" tab="修改密码" force-render>
              <a-form-model layout="horizontal" labelAlign="right" ref="passwordForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="passwordForm" :rules="passwordvalidatorRules">
                <a-form-model-item label="旧密码" prop="oldPassword">
                  <a-input placeholder="请输入旧密码" v-model.trim="passwordForm.oldPassword"  />
                </a-form-model-item>
                <a-form-model-item label="新密码" prop="newPassword">
                  <a-input placeholder="请输入新密码" v-model.trim="passwordForm.newPassword"/>
                </a-form-model-item>
                <!-- <a-form-model-item label="确认新密码" prop="confirmpassword">
                  <a-input-password placeholder="请输入再次输入密码" v-model.trim="passwordForm.confirmpassword"/>
                </a-form-model-item> -->
                <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
                  <a-button type="primary" @click="updatePassWord">保存</a-button>
                </a-form-model-item>
              </a-form-model>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script>
import { mapGetters } from 'vuex'
import { getFileAccessHttpUrl } from '@/utils/util'
import PageLayout from '@/layouts/PageLayout'
import ZImageUpload from '@/components/zz/ZImageUpload'
import { updatepass } from '@/services/user'
export default {
  name: 'Center',
  components: {
    PageLayout,
    ZImageUpload
  },
  data() {
    return {
      passwordvalidatorRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码!' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码!' }
        ]
        // confirmpassword: [
        //   { required: true, message: '请确认新密码!' },
        //   { validator: this.compareToFirstPassword }
        // ]
      },
      infovalidatorRules: {
        username: [
          { required: true, message: '请输入用户账号!' }
        ],
        nickname: [
          { required: true, message: '请输入姓名' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱格式!' }
        ]
      },
      infoForm: {},
      passwordForm: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
  },
  computed: {
    ...mapGetters('account', ['user'])
  },
  mounted() {
    console.log(this.user)
  },
  methods: {
    getAvatar() {
      return getFileAccessHttpUrl(this.user.avatar)
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.passwordForm
      if (value && value !== form.newPassword) {
        callback('两次输入的密码不一致')
      } else {
        callback()
      }
    },
    updateInfo() {
      this.$refs.infoForm.validate(valid => {

      })
    },
    updatePassWord() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.passwordForm.username = this.user.username
          updatepass(this.passwordForm).then(res => {
            if (res.success) {
              this.$message.success('修改成功')
            }
          })
        }
      })
    }
  }
}
</script>
